<template>
	<view class="works">
		<view class="acvite">
			<view class="acvite_header flex_r_between">
				<view class="left">
					<text>你可选1~5个作品进行投放，已选<i>{{active_ids.length}}</i>个</text>
				</view>
				<view class="right flex_center"
					@click="$util.toUrl(`/pages/generalization/moreWork?active_ids=${JSON.stringify(active_ids)}&provider_id=${provider_id}`)">
					<text>查看全部</text>
					<image src="/static/public/my_right_arrow.png"></image>
				</view>
			</view>

			<scroll-view scroll-x="true">
				<view class="acvite_list flex_center">
					<view class="acvite_item" v-for="(item,index) in active" :key="index" @click="onChooseActive(index)"
						:id="active_ids.indexOf(item.id) > -1 ? 'select' : ''">
						<image :src="item.image" mode="aspectFill" class="image"></image>
						<image v-show="active_ids.indexOf(item.id) > -1" src="/static/public/select_s.png"
							mode="aspectFill" class="select_image"></image>
					</view>
				</view>
			</scroll-view>

			<view class="empyt flex_c" v-if="!active.length" @click="$native.toPublish()">
				<text>请去发作品</text>
				<text style="margin-bottom: 16rpx;">100%获得90-500000曝流量</text>
				<view class="flex_center">
					<i>去发布</i>
					<u-icon name="arrow-right-double" size="24rpx" color="#FD2A53"></u-icon>
				</view>
			</view>
		</view>

		<view class="from">
			<view class="title">投放画像</view>
			<view class="inp flex_r_between" @click="toChooseAddress">
				<view class="label">地区</view>
				<view class="right flex_center">
					<view class="hidden" v-show="areaSelect.length">已选择{{areaSelect.length}}个地区</view>
					<view class="hidden" v-show="!areaSelect.length">全国</view>
					<image src="/static/public/my_right_arrow.png"></image>
				</view>
			</view>
			<view class="inp flex_r_between" @click="picker_flag = true">
				<view class="label">性别</view>
				<view class="right flex_center">
					<view class="hidden">{{sex}}</view>
					<image src="/static/public/my_right_arrow.png"></image>
				</view>
			</view>
			<view class="inp flex_r_between" @click="age_flag = true">
				<view class="label">年龄</view>
				<view class="right flex_center">
					<view class="hidden">{{
						!max ? '不限' : `${min} - ${max}岁`
					}}</view>
					<image src="/static/public/my_right_arrow.png"></image>
				</view>
			</view>
		</view>

		<view class="config_box">
			<view class="config_title">投放曝光点</view>
			<view class="config flex_center">
				<view class="item" v-for="(item,index) in config" :key="index" :id="select == index ? 'select' : ''"
					@click="onSelectConfig(index)">
					<view class="top">
						<text>提升曝光点</text>
						<view>{{item.name}}</view>
					</view>

					<view class="line"></view>

					<view class="bottom">
						{{ platform == 'android' || pay_type != 3 ?  Math.floor(item.price) : Math.floor(item.ios_price)}}元
					</view>

				</view>
			</view>
		</view>

		<view class="pay_type">
			<view class="title">支付方式</view>
			<view class="content">
				<view class="list flex_r_between" @click="onPayType(4)">
					<view class="left flex_center">
						<image src="/static/generalization/wallet.png"></image>
						<text>广告费余额(￥{{ balance || 0}})</text>
					</view>

					<view class="right">
						<image :src="`/static/public/select${ pay_type == 4 ? '_s' : ''}.png`"></image>
					</view>
				</view>

				<view class="list flex_r_between" @click="onPayType(5)" v-if="is_mine">
					<view class="left flex_center">
						<image src="/static/generalization/fire.png"></image>
						<text>扶持曝光点({{user_exposure_num}})</text>
					</view>

					<view class="right">
						<image :src="`/static/public/select${ pay_type == 5 ? '_s' : ''}.png`"></image>
					</view>
				</view>

				<view class="populizeList" v-if="pay_type == 5">
					<scroll-view scroll-y="true" style="max-height: 300rpx;" @scrolltolower="scrollToLower">
						<empty v-if="!list.length"></empty>
						<view class="item flex_r_between" v-for="(item,index) in list" :key="index"
							@click="onchoose(item)">
							<view class="left">
								<uni-dateformat :date="item.expire_time * 1000" format="yyyy.MM.dd"></uni-dateformat>
								到期
							</view>
							<view class="right flex_center">
								<text>可用:{{item.exposure_num}}</text>
								<image :src="`/static/public/select${ isSelect(item.id) ? '_s' : ''}.png`"></image>
							</view>
						</view>
						<u-loadmore v-if="total != 0" :status="status" />
					</scroll-view>
					<view class="allchoose flex_r_between">
						<view class="left flex_center" @click="chooseAll">
							<text>全选</text>
							<image :src="`/static/public/select${ support.length == list.length ? '_s' : ''}.png`">
							</image>
						</view>

						<view class="right flex_center">
							<text>累计使用流量：</text>
							<i>{{all_price}}</i>
						</view>
					</view>
				</view>

				<view class="list flex_r_between" @click="onPayType(1)" v-if="platform == 'android'">
					<view class="left flex_center">
						<image src="/static/generalization/boll.png"></image>
						<text>购买</text>
					</view>

					<view class="right">
						<image :src="`/static/public/select${ pay_type == 1 || pay_type == 2 ? '_s' : ''}.png`"></image>
					</view>
				</view>

				<view class="list flex_r_between" @click="onPayType(3)" v-else>
					<view class="left flex_center">
						<image src="/static/generalization/boll.png"></image>
						<text>购买</text>
					</view>

					<view class="right">
						<image :src="`/static/public/select${ pay_type == 3 ? '_s' : ''}.png`"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_box flex_r_between" v-if="pay_type == 5">
			<view class="box">
				<view class="left flex_center">
					<text>累计使用流量:</text>
					<view>{{all_price}}</view>
				</view>
			</view>
			<view class="right">
				<u-button class="custom-style" shape="circle" text="确定" @click="onSubmit"></u-button>
			</view>
		</view>

		<view class="btn_box flex_r_between" v-else>
			<view class="box">
				<view class="left flex_center">
					<text>需要支付:</text>
					<view><i>￥</i>{{price}}</view>
				</view>

				<view class="pay_type_choose flex_center" v-if="pay_type == 2 || pay_type == 1"
					@click="pay_type_model = true">
					<view>支付方式:{{pay_type == 1 ? '微信支付' : '支付宝支付'}}</view>
					<u-icon name="arrow-right" size="20rpx" color="#666"></u-icon>
				</view>
			</view>
			<view class="right">
				<u-button class="custom-style" shape="circle" text="立即支付" @click="onSubmit"></u-button>
			</view>
		</view>


		<!-- 性别 -->
		<u-picker closeOnClickOverlay :show="picker_flag" :columns="[['不限' , '男' , '女']]" @close="picker_flag = false"
			@cancel="picker_flag = false" @confirm="onSex"></u-picker>


		<!-- 年龄 -->

		<u-popup :show="age_flag" @close="age_flag = false" :round="20" :safeAreaInsetBottom="false">
			<view class="age">
				<view class="title">请输入年龄范围</view>
				<view class="age_input flex_center">
					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="min">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>

					<u-icon name="minus"></u-icon>

					<view class="num">
						<u-input border="none" placeholder="请输入" type="number" maxlength="2" v-model="max">
							<u-text text="岁" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
					</view>
				</view>

				<view class="age_button" @click="ageSubmit">确认</view>
			</view>
		</u-popup>

		<!-- model 弹窗 -->
		<u-modal :show="showmodel" title="提示" :content='msg' @close="showmodel = false" @cancel="showmodel = false"
			:confirmText="code == 401 || code == 402 ? `去获得` : `` "
			:cancelText="code == 401 || code == 402 ? `取消` : `我知道了`" :showConfirmButton="code == 401 || code == 402"
			:showCancelButton="true" @confirm="onModel"></u-modal>

		<!-- 支付方式 -->
		<u-popup :show="pay_type_model" :safeAreaInsetBottom="false" @close="pay_type_model = false" mode="center" bgColor="transparent">
			<view class="pay_type_model">
				<view class="title">支付方式</view>
				<view class="list flex_r_between" @click="pay_type = 1">
					<view class="left flex_center">
						<image src="/static/public/wechat.png"></image>
						<text>微信支付</text>
					</view>
					<view class="right">
						<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
					</view>
				</view>
				<view class="list flex_r_between" @click="pay_type = 2">
					<view class="left flex_center">
						<image src="/static/public/alipay.png"></image>
						<text>支付宝支付</text>
					</view>
					<view class="right">
						<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
					</view>
				</view>

				<view class="flex_r_around">
					<view class="btn" @click="pay_type_model = false">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			navBar,
			empty
		},
		watch: {
			// provider_id(newVal, oldVal) {
			// 	if (newVal != oldVal) {
			// 		this.getActiveList();
			// 	}
			// }
		},
		props: {
			config: Array,
			provider_id: {
				default: 0,
				type: String
			},
			active_id: {
				default: 0,
				type: String
			},

			user: {
				default: {},
				type: Object,
			},
		},
		data() {
			return {
				active_ids: [],

				active: [],

				show: false,
				picker_flag: false,
				age_flag: false,


				keyword: '',

				sex: '不限',
				min: '',
				max: '',

				select: 0,
				price: '0',

				// 1 微信 2 支付宝 3 苹果 4 余额 5 曝光量
				pay_type: 1,

				// 曝光量 + 余额
				user_exposure_num: 0,
				balance: 0,

				code: 0,
				showmodel: false,
				msg: '',

				pay_type_model: false,

				page: 1,
				list: [],
				total: 0,

				support: [],

				all_price: 0,

				// android
				platform: 'android',

				// 曝光量触底加载动画
				status: 'loading',


				areaSelect: [],
				
				is_mine: false,

			}
		},
		methods: {
			toChooseAddress() {
				uni.navigateTo({
					url: '/pages/generalization/address',
					events: {
						getAddress: (data) => {
							this.areaSelect = data.address;
						}
					}
				});
			},

			getActiveList(provider_id, active_id) {
				// 有观看权限的查不出来 未过审的查不出来
				this.$get('/article/getProviderArticleList', {
					page: 1,
					provider_id: provider_id,
					article_id: active_id,
					type: 3
				}).then(res => {
					this.active.push(...res.data.data)
				});
			},

			onChooseActive(index) {
				var id = this.active[index].id;
				var i = this.active_ids.indexOf(id);

				if (i == -1) {
					if (this.active_ids.length >= 5) {
						return this.$util.msg('最多可以选择五个作品')
					}
					this.active_ids.push(id)
				} else {
					this.active_ids.splice(i, 1);
				}
			},

			// 选择性别
			onSex(e) {
				this.picker_flag = false;
				this.sex = e.value[0];
			},

			ageSubmit() {
				var min = this.min;

				if (!this.min) {
					return this.$util.msg('请输入投放年龄');
				}
				if (!this.max) {
					return this.$util.msg('请输入投放年龄');
				}

				if (min > this.max) {
					this.min = this.max
					this.max = min
				}

				if (this.min < 18 || this.max < 18) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				this.age_flag = false;
			},

			onSubmit() {
				if (this.min && this.max && (this.min < 18 || this.max < 18)) {
					return this.$util.msg('投放年龄最低为18岁');
				}

				var ids = [];
				this.support.forEach(element => {
					ids.push(element);
				});
				// return AjaxUtils::error('余额不足', [], 402);
				// return AjaxUtils::error('曝光量余额不足', [], 401);

				this.$post('/popularize/savePopularize', {
					type: 1, // 作品推广
					district: JSON.stringify(this.areaSelect), // 作品推广
					gender: this.sex == '男' ? 1 : this.sex == '女' ? 0 : 2, // 作品推广
					age: this.min ? `${this.min}-${this.max}` : '', // 作品推广
					pay_type: this.pay_type, // 作品推广
					active_ids: this.active_ids.join(','), // 作品推广
					popularize_config_id: this.config[this.select].id,
					num: this.config[this.select].num,
					profile: '',
					ids: ids.join(','),
					account: uni.getStorageSync('account') ? uni.getStorageSync('account') : ''
				}, false, (res) => {
					if (res.code == 402) {
						// 余额不足
						this.code = res.code;
						this.msg = res.msg;
						this.showmodel = true;
					} else if (res.code == 401) {
						// 曝光量余额不足
						this.code = res.code;
						this.msg = res.msg;
						this.showmodel = true;
					} else if (res.code != 0) {
						this.msg = res.msg;
						this.code = res.code;
						this.showmodel = true;
					}
				}).then(res => {
					this.code = res.code;
					if (this.pay_type == 1) {
						// 微信支付
						this.$native.toPay(this.pay_type, res.data.id, 'popularizePay');
					}

					if (this.pay_type == 2) {
						// 支付宝支付
						this.$native.toPay(this.pay_type, res.data.id, 'popularizePay');
					}

					if (this.pay_type == 3) {
						// ios内购
						this.$native.toPay(3, res.data.id, 'popularizePay', this.config[this.select]
							.ios_config_id);
					}

					if (this.pay_type == 4) {
						// 余额支付
						this.msg = '支付成功，已开始推广';
						this.showmodel = true;
						this.getBalance();
					}

					if (this.pay_type == 5) {
						// 曝光点支付
						// 余额支付
						this.msg = '支付成功，已开始推广';
						this.showmodel = true;
						this.getBalance();
						this.page = 1;
						this.list = [];
						this.all_price = 0;
						this.getMySupportList();
					}
				})
			},

			onSelectConfig(index) {
				this.select = index;
				if (this.platform == 'android' || this.pay_type != 3) {
					this.price = this.config[index].price;
				} else {
					this.price = this.config[index].ios_price;
				}
			},

			// 获取余额
			getBalance() {
				this.$post('/popularize/getBalance', {}, false).then(res => {
					this.balance = res.data.balance;
					this.user_exposure_num = res.data.user_exposure_num;
				});
			},

			onPayType(e) {
				this.pay_type = e;
				if (this.platform == 'android' || this.pay_type != 3) {
					this.price = this.config[this.select].price;
				} else {
					this.price = this.config[this.select].ios_price;
				}
			},

			onModel() {

				if (this.code == 401) {
					// 曝光量余额不足
					this.$util.toUrl('/pages/blindbox/wheel');
				}

				if (this.code == 402) {
					// 余额不足
					this.$util.toUrl('/pages/store/generalization/wallet/recharge');
				}

				this.showmodel = false;

			},

			getMySupportList() {
				this.$get('/v2.article/getMySupportList', {
					page: this.page,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
					if (this.total <= this.list.length) {
						this.status = 'nomore'
					}
				});
			},

			scrollToLower() {
				if (this.total > this.list.length) {
					this.page++;
					this.getMySupportList();
				}
			},

			isSelect(id) {
				if (this.support.indexOf(id) > -1) {
					return true;
				} else {
					return false;
				}
			},

			chooseAll() {
				if (this.support.length != this.list.length) {
					this.support = [];
					this.list.forEach(item => {
						this.support.push(item.id);
					})
				} else {
					this.support = [];
				}
				this.getPrice();
			},

			getPrice() {
				this.all_price = 0;
				this.list.forEach(element => {
					var index = this.support.indexOf(element.id);
					if (index > -1) {
						this.all_price += this.list[index].exposure_num
					}
				});
			},

			onchoose(item) {
				if (this.support.indexOf(item.id) > -1) {
					return true;
				} else {
					this.support.push(item.id);
				}
				this.getPrice();
			},

			getPayStatus(type) {
				if (type == 'popularizePay') {
					this.code = 0;
					this.msg = '支付成功，已开始推广';
					this.showmodel = true;
				}
			},

			init() {
				this.getBalance();
				this.getMySupportList();
				if (this.platform == 'android' || this.pay_type != 3) {
					this.price = this.config[0].price;
				} else {
					this.price = this.config[0].ios_price;
				}
			}
		},

		created() {
			this.platform = uni.getSystemInfoSync().platform;
			window.getPayStatus = this.getPayStatus;
			if (this.platform == 'ios') {
				this.pay_type = 3;
			}
		},
	}
</script>

<style lang="less" scoped>
	.works {
		padding-bottom: 32rpx;
	}

	.acvite {
		.acvite_header {
			margin-bottom: 20rpx;

			.left {
				text {
					font-size: 24rpx;
					color: #999999;

					i {
						color: #FD2A53;
						font-style: normal;
					}
				}
			}

			.right {
				text {
					font-size: 24rpx;
					color: #333333;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.acvite_list {
			flex-wrap: nowrap;
			flex-shrink: true;

			.acvite_item {
				width: 248rpx;
				height: 328rpx;
				border-radius: 16rpx;
				border: 4rpx solid transparent;
				overflow: hidden;
				flex-shrink: 0;
				position: relative;
				margin-right: 16rpx;

				.image {
					width: 100%;
					height: 100%;
				}

				.select_image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}

			}

			#select {
				border: 4rpx solid #FD2A53;
			}
		}
	}

	.from {
		margin-top: 40rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.inp {
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			overflow: hidden;
			margin-top: 20rpx;

			.label {
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-right: 16rpx;
			}

			.right {
				flex: 1;
				overflow: hidden;

				view {
					flex: 1;
					font-size: 32rpx;
					color: #999999;
					line-height: 44rpx;
					text-align: right;
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}

			}
		}



	}



	.age {
		height: 40vh;
		padding: 20rpx 32rpx 110rpx;
		position: relative;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 40rpx;
		}

		.num {
			margin: 0 16rpx;
			border: 4rpx solid #eee;
			padding: 10rpx;
			border-radius: 16rpx;
		}

		.age_button {
			width: 686rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			position: absolute;
			bottom: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.config_box {
		margin-top: 48rpx;

		.config_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			margin-bottom: 8rpx;
		}

		.config {
			flex-wrap: wrap;

			.item {
				width: 216rpx;
				height: 232rpx;
				padding: 28rpx 24rpx 0 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #EEEEEE;
				margin: 6rpx;

				.top {
					text {
						font-size: 28rpx;
						color: #999999;
					}

				}

				.line {
					height: 2rpx;
					margin: 18rpx 0;
					background: #EEEEEE;
				}

				.bottom {
					font-weight: 600;
					font-size: 32rpx;
					color: #FD2A53;
				}
			}

			#select {
				background: #FFEFF2;
				border: 2rpx solid #FFDCE3;

				.top {
					text {
						color: #FD2A53;
					}
				}

				.line {
					background: #FFDCE3;
				}
			}
		}
	}

	.btn_box {
		height: 166rpx;
		padding: 0 32rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #FFF;

		.left {
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}

			view {
				i {
					font-style: normal;
					font-size: 28rpx;
				}

				font-weight: 600;
				font-size: 40rpx;
				color: #FD2A53;
			}
		}

		.pay_type_choose {
			view {
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
			}
		}

		.right {
			.custom-style {
				background: #FD2A53;
				width: 228rpx;
				height: 72rpx;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}

	.empyt {
		padding: 100rpx 0;

		text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		view {
			font-size: 24rpx;
			color: #FD2A53;
			line-height: 34rpx;

			i {
				font-style: normal;
			}
		}
	}

	.pay_type {
		padding-bottom: 166rpx;
		margin-top: 48rpx;

		.title {
			font-size: 24rpx;
			color: #131313;
			line-height: 34rpx;
			margin-bottom: 24rpx;
		}

		.content {
			background: #F8F8F8;
			border-radius: 16rpx;
			overflow: hidden;

			.list {
				height: 100rpx;
				background: #F8F8F8;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.pay_type_model {
		width: 640rpx;
		height: 492rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 48rpx;

		.title {
			font-weight: 600;
			font-size: 40rpx;
			color: #131313;
			line-height: 40rpx;
			text-align: center;
			margin-bottom: 28rpx;
		}

		.list {
			padding: 26rpx 0;

			.left {
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #131313;
				}
			}

			.right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.btn {
			width: 400rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			margin-top: 48rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.populizeList {
		.item {
			height: 88rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 16rpx 32rpx;
			padding: 0 24rpx;

			.left {
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}

			.right {
				text {
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}
			}
		}

		.allchoose {
			height: 88rpx;
			margin: 16rpx 32rpx;

			.left {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 6rpx;
				}

				text {
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
				}
			}

			.right {
				text {
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
				}

				i {
					color: #131313;
					font-size: 26rpx;
					line-height: 36rpx;
					font-style: normal;
				}
			}
		}
	}
</style>